import React, { Component } from "react";
import { Button } from "antd";
import {
    addItem,
    changeVisable,
    changeMode,
    updateItem,
} from "@/store/actions/toDoList";
import { connect } from "react-redux";
import { Modal, Form, Input, Row, Col, message } from "antd";

class Operations extends Component {
    addItem = () => {
        this.props.changeMode({ mode: "add" });
        this.props.changeVisable({ visable: true });
    };
    onOk = () => {
        this.props.changeVisable({ visable: false });
    };
    onCancel = () => {
        this.props.changeVisable({ visable: false });
    };
    onSubmit = ({ item }) => {
        let mode = this.props.toDoList.mode;
        if (mode == "add") {
            this.props.addItem({ item });
            message.success("添加成功");
        } else if (mode == "update") {
            this.props.updateItem({
                item: this.refs.form.getFieldValue("item"),
                index: this.props.rowData.index,
            });
            message.success("修改成功");
        }
        this.props.changeVisable({ visable: false });
    };
    componentWillReceiveProps(props) {
        setTimeout(() => {
            if (this.refs.form) {
                this.refs.form.setFieldsValue({ item: props.rowData.item });
            }
        });
    }
    render() {
        const { visable, mode } = this.props.toDoList;
        return (
            <div>
                <Button onClick={this.addItem}>增加一条</Button>
                <Modal
                    visible={visable}
                    title="新增"
                    onClick={this.addItem}
                    onOk={this.onOk}
                    onCancel={this.onCancel}
                >
                    <Row justify="center">
                        <Col span={14}>
                            <Form ref="form" onFinish={this.onSubmit}>
                                <Form.Item
                                    name="item"
                                    label="名称"
                                    rules={[
                                        {
                                            required: true,
                                            message: "名称为必填项",
                                        },
                                    ]}
                                >
                                    <Input />
                                </Form.Item>
                                <Form.Item>
                                    <Button type="primary" htmlType="submit">
                                        {mode == "add" ? "添加" : "修改"}
                                    </Button>
                                </Form.Item>
                            </Form>
                        </Col>
                    </Row>
                </Modal>
            </div>
        );
    }
}
const mapStateToProps = (state) => {
    return {
        toDoList: state.toDoList,
    };
};
const mapDispatchToProps = (dispatch) => {
    return {
        addItem: ({ item }) => dispatch(addItem({ item })),
        changeVisable: ({ visable }) => dispatch(changeVisable({ visable })),
        changeMode: ({ mode }) => dispatch(changeMode({ mode })),
        updateItem: ({ item, index }) => dispatch(updateItem({ item, index })),
    };
};
export default connect(mapStateToProps, mapDispatchToProps)(Operations);
